<template>
	<view class="edit_ed">
		<view class="logo_pic">
			<view class="tit_text">修改手机号</view>
			<view class="tit_text">修改成功后，您可以使用新手机号进行登录</view>
		</view>
		<view class="input_ediit">
			<text>当前手机号{{store.getters.setProcessingTel}}</text>
			<view class="phone">
				<uni-easyinput :clearable="false" placeholderStyle="font-size:28rpx;" maxlength="11"
					v-model="changePhone.phone" type="number" placeholder="请输入新手机号"></uni-easyinput>
				<view class="code_text" v-if="count==0" @click="getCode">
					获取验证码
				</view>
				<view class="code_text_" v-else>
					({{count}}s)后重新获取
				</view>
			</view>
			<uni-easyinput :clearable="false" placeholderStyle="font-size:28rpx;" maxlength="6"
				v-model="changePhone.code" type="number" placeholder="请输入验证码"></uni-easyinput>
		</view>
		<view class="btn_edit">
			<button type="primary" class="onlogout" @click="changeNameImg"
				:disabled="!(changePhone.phone.length==11&&changePhone.code.length==6)">确认修改</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue"
	import store from '@/store/index.js'
	import apiUser from '@/util/api/user.js'
	import apiCode from '@/util/api/getcode.js'
	import { onUnload } from '@dcloudio/uni-app'
	// 验证码获取秒数
	const count = ref(0) //倒计时 //这是重新获取验证码的倒计时
	const clear = ref(null)
	const changePhone = ref({
		code: '', //用户输入的验证码
		phone: '' //绑定的手机
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(store.state.userInfo.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)
		await apiCode.updateCode({
			phone: store.state.userInfo.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					duration: 3000,
					position: 'top',
				})
			}
		})
	}
	const changeNameImg = async () => {
		if (!/^1[^1^2]\d{9}$/.test(changePhone.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		await apiUser.bindingPhone(changePhone.value).then(res => {
			if (res.code != 20000) {
				changePhone.value.code = ""
			} else {
				// 获取用户信息
				store.dispatch('getUpdataUser')
				uni.showToast({
					title: res.message,
					position: 'top',
					icon: 'success',
					duration: 3000
				});
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss">
	.edit_ed {
		.logo_pic {
			padding: 60rpx 60rpx 40rpx;

			.tit_text {
				font-weight: bold;

				&:nth-child(2) {
					font-size: 28rpx;
					color: #999;
					font-weight: normal;
				}
			}
		}

		.input_ediit {
			margin: 0 60rpx;
			font-size: 28rpx;

			:deep(.is-input-border) {
				border-radius: 10rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-bottom: 30rpx;
				margin-top: 10rpx;
				border: 0rpx solid #999;
				height: 80rpx;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.phone {
				position: relative;
				padding-top: 10rpx;

				.code_text {
					height: 30rpx;
					font-size: 28rpx;
					color: #007cff;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
					z-index: 2;
				}

				.code_text_ {
					height: 30rpx;
					font-size: 28rpx;
					color: #999;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
				}
			}
		}

		.btn_edit {
			position: absolute;
			margin: 60rpx auto;
			width: 100%;

			:deep(button:after) {
				border: none !important;
			}

			.onlogout {
				font-size: 28rpx;
				// padding: 0rpx 200rpx;
				margin: 0 60rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #007cff;
			}
		}
	}
</style>